<?xml version='1.0'?>
<!--
/*
 * Nanoblok (Experimental) - Web-Based Graphical Editor for Game Sprite Development
 * http://code.google.com/p/nanoblok/
 * Copyright (c) 2009 Alex Trujillo
 * Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) license.
 * 
 * Summary for index.xhtml:
 * XHTML format with SVG-prefixed namespaces, because SVG with HTML5 Canvas is harder to pull off (and performs poorly).
 */
-->
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<meta http-equiv="Content-Style-Type" content="text/css"/>

	<title>Nanoblok r0.5 Alpha</title>
	
	<script type="text/javascript" src="loggit.js"></script>
	<script type="text/javascript" src="main.js"></script>
	<script type="text/javascript" src="data.js"></script>
	<script type="text/javascript" src="grid.js"></script>
	<script type="text/javascript" src="block.js"></script>
	<script type="text/javascript" src="text.js"></script>
	<script type="text/javascript" src="effects.js"></script>
	<script type="text/javascript" src="ui.js"></script>
	<script type="text/javascript" src="json.js"></script>
	
	<!-- <link rel="stylesheet" type="text/css" href="styles.css"/> -->
	
	<style>
		body {
			margin: 0;
			padding: 0;
			text-align: center;
		}
		
		#effects, #overlays {
			position: absolute;
			top: 0px;
			left: 0px;
			z-index: -1;
		}
	</style>
</head>
<body>

<canvas id="effects"></canvas>
<canvas id="overlays"></canvas>

<svg:svg id="grid" width="100%">
	<svg:g id="gridContainer" fill-opacity="0.0" transform="translate(0, -35)"/>

	<svg:g id="statusContainer">
		<svg:g id = "loggitContainer" transform="skewY(-26.565)  translate(0, 0)">
			<svg:rect id="debugBox" x="0" y="20" width="315" height="85" fill="#333" fill-opacity="0.5" rx="5"/>
			<svg:text x="20" y="15" font-family="Verdana" font-size="12" font-weight="bold" fill="#333">Event Log</svg:text>
			<svg:text id="debugText" x="20" y="35" font-family="Verdana" font-size="12" fill="#eee">
				<!-- <svg:tspan x="20" dy="5"></svg:tspan> -->
			</svg:text>
		</svg:g>
	</svg:g>
	
	<svg:g id="nanoblok-logo" stroke-width="1" fill-opacity="1" stroke-opacity="1" transform="scale(3)">
		<svg:path d="M 5 10 L 5 20 L 15 25 L 15 15 Z" fill="rgb(42, 197, 18)" id="left" fill-opacity="1"/>
		<svg:path d="M 15 15 L 15 25 L 25 20 L 25 10 Z" fill="rgb(62, 217, 38)" id="right" fill-opacity="1"/>
		<svg:path d="M 5 10 L 15 15 L 25 10 L 15 5 Z" fill="rgb(82, 237, 58)" id="top" fill-opacity="1"/>
		<svg:g>
			<svg:path d="M 25 10 L 15 15 L 5 10" stroke="rgb(92, 247, 68)" fill="none"/>
			<svg:path d="M 15 25 L 15 15" stroke="rgb(92, 247, 68)"/>
		</svg:g>
		<svg:path d="M 5 10 L 5 20 L 15 25 L 25 20 L 25 10 L 15 5 Z" stroke="#444" fill="none"/>
	</svg:g>
	
	<svg:text id="logoText" x="49" y="90" font-family="Verdana" font-size="16" font-weight="bold" fill="white"
		transform="skewY(-26.565)">nb</svg:text>
		
	<svg:g id="sideButtonsTop" stroke="black" stroke-width="3" stroke-opacity="0.0">
		<svg:rect id="saveButton" x="0" y="0" width="35" height="35" fill="orange" fill-opacity="0.5" rx="3" transform="skewY(26.565)"/>
		<svg:text id="saveText" x="8" y="25" font-family="Verdana" font-size="18" fill="white" transform="skewY(26.565)">U↑</svg:text>
		<svg:rect id="loadButton" x="0" y="45" width="35" height="35" fill="orange" fill-opacity="0.5" rx="3" transform="skewY(26.565)"/>
		<svg:text id="loadText" x="9" y="69" font-family="Verdana" font-size="16" fill="white" transform="skewY(26.565)">L↓</svg:text>
		<svg:rect id="refreshButton" x="45" y="0" width="35" height="35" fill="orange" fill-opacity="0.5" rx="3" transform="skewY(26.565)"/>
		<svg:text id="refreshText" x="48" y="25" font-family="Verdana" font-size="18" fill="white" transform="skewY(26.565)">R↺</svg:text>
		<svg:rect id="deleteButton" x="45" y="45" width="35" height="35" fill="orange" fill-opacity="0.5" rx="3" transform="skewY(26.565)"/>
		<svg:text id="deleteText" x="48" y="69" font-family="Verdana" font-size="16" fill="white" transform="skewY(26.565)">X⌫</svg:text>
		<svg:rect id="selectButton" x="90" y="0" width="35" height="35" fill="orange" fill-opacity="0.5" rx="3" transform="skewY(26.565)"/>
		<svg:text id="selectText" x="94" y="25" font-family="Verdana" font-size="16" fill="white" transform="skewY(26.565)">S</svg:text>
		<svg:rect id="selectLogo" x="107" y="12" height="13" width="13" fill="none" stroke-opacity="1.0" stroke-width="1.5" stroke="white" stroke-dasharray="3,2" transform="skewY(26.565)"/>
		<svg:rect id="fillButton" x="90" y="45" width="35" height="35" fill="orange" fill-opacity="0.5" rx="3" transform="skewY(26.565)"/>
		<svg:text id="fillText" x="94" y="69" font-family="Verdana" font-size="16" fill="white" transform="skewY(26.565)">F▨</svg:text>
	</svg:g>
	
	<svg:g id="sideButtonsLeft">
		<svg:rect id="gridUpButton" x="0" y="1" width="20" height="25" fill="#aaa" fill-opacity="0.5" rx="1" transform="skewY(-26.565)"/>
		<svg:text id="gridUpText" x="4" y="20" font-family="Verdana" font-size="16" fill="white" transform="skewY(-26.565)">∆</svg:text>
		<svg:rect id="gridDownButton" x="0" y="31" width="20" height="25" fill="#aaa" fill-opacity="0.5" rx="1" transform="skewY(-26.565)"/>
		<svg:text id="gridDownText" x="4" y="50" font-family="Verdana" font-size="16" fill="white" transform="skewY(-26.565)">∇</svg:text>
	</svg:g>
	
	<svg:g id="sideColorsRight" stroke="black" stroke-width="3" stroke-opacity="0.0"></svg:g>
	
	<svg:g id="markerPoints" fill="red" fill-opacity="0.0"></svg:g>
</svg:svg>

<input id="saveFile" type="text" size="100" value="Save file test."></input>

</body>
</html>